<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="bp" value="${pageContext.request.contextPath}"></c:set>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<jsp:include page="common/heard.jsp"></jsp:include>
<div id="page-wrapper">
    <div class="row">
        <div class="col-md-12">
            <h1 class="page-header">快速订购</h1>
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <div class="row">
        <div class="col-md-8">

            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th style="width: 12%">序号</th>
                    <th style="width: 20%">用户名</th>
                    <th style="width: 10%">密码</th>
                    <td style="width: 14%">操作</td>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${userlist}" var="keyword" varStatus="id">
                    <tr>
                        <td>${keyword.id}</td>
                        <td>${keyword.username}</td>
                        <td>${keyword.password}</td>
                        <td><button onclick="quierk(${keyword.id})">删除</button><button onclick="findbyid(${keyword.id})" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">编辑</button></td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>

            <a href="${bp}/user/saveview">跳转注册页面</a>
        </div>

    </div>
</div>

<!-- /#page-wrapper -->

</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    编辑用户
                </h4>
            </div>
            <div class="modal-body">
                <input hidden  id="id_u" type="text">
                <span>用户名</span><input id="username_u" type="text">
                <span>密码</span><input id="password_p" type="text">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" onclick="update()" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<script src="${bp}/static/assets/js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap Js -->
<script src="${bp}/static/assets/js/bootstrap.min.js"></script>

<!-- Metis Menu Js -->
<script src="${bp}/static/assets/js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="${bp}/static/assets/js/morris/raphael-2.1.0.min.js"></script>
<script src="${bp}/static/assets/js/morris/morris.js"></script>


<script src="${bp}/static/assets/js/easypiechart.js"></script>
<script src="${bp}/static/assets/js/easypiechart-data.js"></script>

<script src="${bp}/static/assets/js/Lightweight-Chart/jquery.chart.js"></script>

<!-- Custom Js -->

<script src="${bp}/static/assets/js/custom-scripts.js"></script>

<script type="application/javascript">



    function findbyid(id) {
        $.ajax({
            url: "${bp}/user/findById",
            type: "get",
            data:{"id":id},
            success: function(result){
                var parsedJson = jQuery.parseJSON(result);

                $("#id_u").val(parsedJson.id)
                $("#username_u").val(parsedJson.username)
                $("#password_p").val(parsedJson.password)
            }
        });
    }

    function update() {

        var id = $("#id_u").val()
        var name = $("#username_u").val()
        var pa = $("#password_p").val()


        $.ajax({
            url: "${bp}/user/updateByUser",
            type: "get",
            data:{"username":name,"id":id,"password":pa},
            success: function(result){
               if (result == 1){
                   alert("更新成功")
                   window.location.reload()
               }else {
                   alert("更新失败")
               }
            }
        });
    }

    function edit(id){
        $.ajax({
            url: "${bp}/user/updateUser",
            type: "POST",
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify({id: id}),
            success: function(result){

            }
        });
    }

    function quierk(id) {
        $.ajax({
            type:"get",
            url:"${bp}/user/deleteById",
            data:{"id":id},
            success : function (msg) {
                if(msg == 1){
                    alert("删除成功")
                    window.location.reload()
                }else{
                    alert("删除失败")
                }
            }

        })
    }
</script>
</body>
</html>